<template>
  <div id="container" class="box">
    <div id="cesiumContainer"></div>
    <!-- 地图气泡弹框 -->

    <div class="" id="one">
      <module1Popup :pointInfo="popData" ref="popUp" />
    </div>
  </div>
</template>

<script>
import cesiumPopup from "./cesiumPopup.vue";

export default {
  name: "HelloWorld",
  components: {
    cesiumPopup,
  },
};
</script>

<style scoped lang="scss">
.dynamic-layer {
  display: none;
  user-select: none;
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 534px;
  // width: 100%; // 这里设置成100%，打算在组件内根据内容设置具体的宽度实践 发现无效
  z-index: 99990;
}
.dynamic-layer .line {
  position: absolute;
  left: 0;
  width: 0;
  /* height: 100px; */
  bottom: 0;
  /* background: url(./img/line.png); */
}
.dynamic-layer .main {
  display: none;
  position: absolute;
  top: 0;
  left: 30px;
  right: 0;
  /* bottom: 100px; */
  transform: translateY(-100%);
  background: url(~@/assets/map/layer_border.png) no-repeat;
  background-size: 100% 100%;
  color: white;
  padding: 20px 20px 20px 20px;
  font-size: 14px;
  user-select: text;
  pointer-events: auto;
  background-color: rgba(3, 22, 37, 0.85);
}
</style>
